<script setup>
// big-v 绑定
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { showSuccessToast, showToast } from "vant";
import { useRoute } from "vue-router";
import { useConfigStore } from "@/store/modules/config";
import { isMobileDevice } from "@/utils/base_index";

const { locale, t } = useI18n();

const route = useRoute();

const useConfig = useConfigStore();

const isBindWallte = ref(true);

const address = ref(route.query.address ?? "");

/// ======================bigv

// console.log("route", route);

// 按钮状态
const butLoading = ref(false);
const showDialog = ref(false);

// 检查绑定状态
// const getInvitationRelationship = async () => {
//   if (!useConfig.getAccount) {
//     isBindWallte.value = false;
//     return;
//   }

//   const addr = await useConfig.getMasterContract.methods
//     .getInvitationRelationship(useConfig.getAccount)
//     .call();

//   const _is = addr != "0x0000000000000000000000000000000000000000";
//   isBindWallte.value = _is;
// };

const showDialogFn = () => {
  if (address.value) {
    showDialog.value = true;
  }
};

// 绑定
const setInvitationRelationship = async () => {
  // 0x549Cd67E765CA156BA149b8c6bbD29CB7ECCEf00
  if (address.value && !butLoading.value) {
    const data = await useConfig.getMasterContract.methods
      .setInvitationRelationship(address.value)
      .encodeABI();
    const params = {
      to: useConfig.masterContractAddress,
      from: useConfig.getAccount,
      value: useConfig.getWbe3.utils.toHex(0),
      data
    };

    try {
      const gasLimit = await useConfig.getWbe3.eth.estimateGas(params);
      params.gas = useConfig.getWbe3.utils.toHex(gasLimit);
    } catch (error) {
      // params.gas = useConfig.getWbe3.utils.toHex(200000);
    }

    butLoading.value = true;
    useConfig.getWbe3.eth
      .sendTransaction(params)
      .on("transactionHash", function (hash) {
        console.log("hash", hash);
        showSuccessToast(t("bigv.bindSuccess"));
      })
      .on("receipt", receipt => {
        console.log("receipt", receipt);
        useConfig.GET_REFERRER_ADDRESS();
        isBindWallte.value = true;
        butLoading.value = false;
      })
      .catch(error => {
        butLoading.value = false;
        showToast(error.data.message);
        console.error("error:", error.data);
      });
  }
};

// onMounted(() => {
//   getInvitationRelationship();
// });
</script>

<template>
  <div v-if="!useConfig.referrerAddress" class="out-link">
    <h4>{{ $t("home.relativeLink") }}</h4>
    <p class="address">{{ $t("home.address") }}</p>
    <van-field
      v-model="address"
      class="enterAddress"
      :placeholder="$t('home.pleaseEnterAddress')"
      :readonly="$route.query.address"
    />
    <!--      <p class="enterAddress">{{$t('home.pleaseEnterAddress')}}</p>-->
    <!--      <van-divider :margin="12" />-->
    <div class="div-btn-paramy div-btn" @click="showDialogFn">
      {{ $t("home.link") }}
    </div>

    <!--提示框-->
    <div v-if="showDialog" class="div-dialog">
      <div class="div-dialog-bg" />
      <div class="dialog-content">
        <div class="text">{{ $t("home.confirmBindWallte") }}</div>
        <div class="div-footer">
          <div class="div-btn div-btn-cancel" @click.stop="showDialog = false">
            {{ $t("home.cancel") }}
          </div>
          <div
            class="div-btn div-btn-sure"
            @click.stop="setInvitationRelationship"
          >
            {{ $t("home.confirm") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "@/styles/mixin.less";

.out-link {
  margin: 22px 10px 0;
  padding: 0px 22px;
  background: #27283e;
  border-radius: 20px;
  border: 1px solid #47ddc2;
  h4 {
    color: #e5f0f4;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
  }
  .address {
    margin-top: 24px;
    margin-bottom: 13px;
    font-weight: 500;
    font-size: 12px;
    color: #606374;
  }
  .enterAddress {
    font-weight: 500;
    font-size: 14px;
    color: #e5f0f4;
    line-height: 20px;
    background-color: #27283e;
    padding-left: 0px;
    padding-right: 0px;
    :deep(.van-field__control) {
      color: #fff;
    }
  }
  :deep(.van-cell:after) {
    left: 0px;
  }
  .div-btn {
    margin-top: 20px;
    margin-bottom: 16px;
  }
}

.div-dialog {
  position: absolute;
  width: 60%;
  left: 20%;
  top: 30%;
  z-index: 22;
  &-bg {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    opacity: 0.7;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
  .dialog-content {
    position: absolute;
    left: 0px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    line-height: 20px;
    z-index: 1111;
    text-align: center;
    width: 100%;
    padding: 30px 10px 20px;
    border: 1px solid #24302d;
    border-radius: 20px;
    background: linear-gradient(to right, rgba(253, 253, 253, 0.2), #121318);
    .div-footer {
      margin-top: 20px;
      display: flex;
      justify-content: space-evenly;
      gap: 20px;
      .div-btn {
        height: 40px;
        background: #676b7c;
        border-radius: 8px;
        width: 120px;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        &-cancel {
          background-color: #676b7c;
        }
        &-sure {
          background: linear-gradient(57deg, #47ddc2 0%, #c1ffc8 100%);
        }
      }
    }
  }
}
</style>
